<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大都会人寿稽核系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
	margin: 0;
	padding: 0;
	background: #f0f0f0;
}

.header {
	position: absolute;
	height: 33.33%;
	background-image: url('/images/metlifelogo.png' );
	background-position: 50% 90%;
	background-repeat: no-repeat;
	background-size: 151px 44px;
	width: 100%;
}

.footer {
	position: absolute;
	height: 33.33%;
	margin: 0;
	padding: 0;
	bottom: 0;
	width: 100%;
}

.content {
	position: absolute;
	height: 330px;
	width: 100%;
	top: 33.33%;
	margin: 0;
	padding: 0;
	background: #03468a;
}

.form1 {
	position: absolute;
	bottom: 30px;
	left: 60%;
}

input {
	font-size: 14px;
	width: 300px;
	line-height: 30px;
	height: 30px;
	border: 0;
	margin: 0;
	outline: none;
	padding: 0 0 0 15px;
}

#btn {
	width: 315px;
	border: 0;
	margin: 0;
	padding: 0;
	color: white;
	background: #4CAF50;
}

.title {
	width: 315px;
	font-size: 18px;
	color: white;
	margin-bottom: 30px;
}

.ad {
	position: absolute;
	height: 100%;
	width: 408px;
	left: 15%;
}

img {
	max-width: 408px;
}
</style>
<script type="text/javascript">
	function checklogin () {
		var username=document.getElementById('username');
		var userpwd=document.getElementById('password');
		if (username.value==''||userpwd.value=='') {
			alert('用户名或密码为空！');
			username.value='';
			userpwd.value='';
			return;
		}
		 $.ajax({
			 
				url:"/logon",
		        type:"post",
	   		    data:$('form').serialize(),
		        success:function(data){
		    		var result=data;
		  		  if (result=='true') {
						window.location.href="/index.html";
					}else{
						alert("用户名或密码错误");
		      	    }
				},
	            error:function(data,type, err){
		         console.log("ajax错误类型："+type);
		         console.log(err);
	            }
	    })
	}
	function keyLogin(){
		 if (event.keyCode==13)  //回车键的键值为13
		   document.getElementById("btn").click(); //调用登录按钮的登录事件
		}
	</script>
</head>

<body onkeydown="keyLogin();">

	<div class='header'></div>
	<div class='content'>
		<div class='ad'>
			<img src='/images/2.png' />
		</div>
		<div class='form1'>
			<div class='title'>欢迎使用大都会稽核系统</div>
			<form>
				<input type='text' placeholder='请输入账号名' autofocus id='username'	name='username'				required />
				<p />
				<input type='password' placeholder='请输入密码' required id='password'  name='password' />
				<p />
				<input type='button' id="btn" value='登录'  onclick='checklogin()'/>
			</form>
		</div>
	</div>
	<div class='footer'></div>
</body>
</html>